import React, {Component} from 'react';
import './../App.scss';

import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import TabItem from './TabItem'

import TabItemDatas from '../data/tabitemdatas'

class ReactTab extends Component {
    state = {
        value: 0,
    };

    handleChange = (event, value) => {
        this.setState({ 
            value
         });
    };
    componentDidMount(){
        // console.log(TabItemDatas)
    }
    
    render() {
        const tabHead = {
            background:'#e2e2e2'
        }
        const head = {
            position: 'fixed',
            top: 0,
        }
       
        return (
            <div className="add" >
                 <AppBar position="static" color="default" style = {tabHead} style={head} >
                    <Tabs
                        value={this.state.value}
                        onChange={this.handleChange}
                        indicatorColor="primary"
                        textColor="primary"
                        scrollable
                        scrollButtons="auto"
                        // centered
                        className="flexW"
                    >
                        <Tab label="已结束" />
                        <Tab label="10月1号" />
                        <Tab label="10月2号" />
                        <Tab label="10月3号" />
                        <Tab label="10月4号" />
                        <Tab label="10月5号" />
                        <Tab label="10月6号" />
                    </Tabs>
                    </AppBar>
                    {
                        TabItemDatas.map((item,index)=>{
                            return(
                                this.state.value === index?(
                                    <TabItem msg={item} key={index}/>
                                ):null
                            )
                        })
                    }
     
            </div>
        );
    }
}

export default ReactTab;
